<template>
	<view class="list">
		<view class="list-lift">
			<view v-for="(item,index) in lists" :key="item.id" :id="item.id"
				:class="leftIndex==index ? 'list-lift11 list-top' : 'list-lift11'" @click="checkIndex(item.id,index)">{{item.name}}</view>
		</view>

		<view class="list-right">
			<view class="list-right1">
				<view class="list-right2" v-if="result.length>0">
					<view class="list-right11" v-for="(i,index) in result" :key="result.id">
						<img :src="i.pic" class="list-img1">
						<view class="list-right22">
							{{i.name}}
						</view>
						<p>￥<span>{{i.minPrice}}</span></p>
					</view>
					<view class="list-right1-2">
						<span>没有更多了</span>
					</view>
				</view>
				<view class="" v-else>
					<image src="../../static/images/good.14ef61f1.png" alt="">
						<view class="list-right1-2">
							<span>暂无商品</span>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftIndex: 0,
				lists: [],
				result: [],
				params: {
					categoryId: "",
					page: 1,
					pageSize: 10,
					token: ""
				}
			}
		},
		methods: {
			getlist() {
				console.log(this)
				let that = this
				uni.request({
					url: 'https://api.it120.cc/xiaochengxu/shop/goods/category/all?token=',
					method: "get",
					dataType: "json",
					success: function(data) {
						console.log(data),
							console.log(data.data.data),
							that.lists = data.data.data
							that.getcheckList(that.lists[0].id)
					}
				});
			},
			checkIndex(id, index){
				this.result = []
				this.leftIndex = index;
				this.getcheckList(id)
			},
			getcheckList(id) {
				let that = this
				this.params.categoryId = id
				uni.request({
					url: 'https://api.it120.cc/xiaochengxu/shop/goods/list/v2',
					method: "post",
					dataType: "json",
					data: that.params,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						console.log(res);
						if(res.data.msg==="success"){
							console.log(1)
							that.result = res.data.data.result
						}
						console.log(2);
					}
				});
			},
		},
		created() {
			this.getlist()
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		height: calc(100vh - 200rpx);
		display: flex;
		background: #fff;
		padding: 0;
		margin: 0;

		.list-lift {
			width: 220rpx;
			height: calc(100vh - 200rpx);
			background-color: rgb(247, 248, 250);
		}

		.list-lift11 {
			display: block;
			padding: 36rpx 40rpx;
			position: relative;
			font-size: 28rpx;


		}

		.list-img1 {
			width: 100%;
		}

		.list-top {
			display: block;
			background: #fff;
		}

		.list-right2 {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			flex-direction: row;

		}

		.list-top::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			width: 8rpx;
			height: 32rpx;
			background-color: rgb(27, 167, 132);
			transform: translateY(-50%);

		}


		.list-right {
			flex: 1;
			overflow-y: auto;
			box-sizing: border-box;
		}

		.list-right1 {
			flex-wrap: wrap;
			font-size: 20rpx;
		}

		.list-right1-2 {
			color: gray;
			height: 94rpx;
			width: 100%;
			font-size: 30rpx;
			line-height: 94rpx;
			text-align: center;
		}

		.list-right11 {
			width: 46%;
			padding-left: 9.4rpx;
			padding-right: 9.4rpx;
			margin-bottom: 18.8rpx;
		}

		.list-right22 {
			width: 100%;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			white-space: nowrap;
			height: 70rpx;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>